<template>
  <div class="app-container">
    <div class="zd3">
      <div class="zd3-title">
        <p>
          <span>品牌</span>
          <input v-model="proname" type="text" placeholder="请输入品牌名称" />
        </p>
        <h3 @click="search">查询</h3>
        <h4 @click="resetList">重置</h4>
				<h3 @click="addPeople" style="background: #0093FF">新增</h3>
      </div>
      <div class="product">
        <div class="pro-l">
          <el-tree
            :data="twoClassify"
            node-key="name"
            :props="{label: 'name',children:'listwarehouseGoods'}"
            @current-change="handleNodeClick"
          ></el-tree>
        </div>
        <div class="pro-r">
          <el-table
            ref="singleTable"
            :data="proDeail"
            highlight-current-row
            style="width: 100%"
            border
          >
            <el-table-column align="center" prop="brand" label="品牌"/>
            <el-table-column align="center" prop="commodityName" label="名称"/>
            <el-table-column align="center" prop="frequencys" label="频率"/>
						<el-table-column align="center" prop="lubrication" label="润滑方式" />
            <el-table-column align="center" prop="num" label="数量" />
            <el-table-column align="center" prop="parameters" label="参数" />
            <el-table-column align="center" prop="model" label="规格型号" />
						<el-table-column align="center" prop="pieceWeight" label="单重" />
						<el-table-column align="center" prop="allWeight" label="总重" />
						<el-table-column align="center" prop="powers" label="功率" />
						<el-table-column align="center" prop="revolutionsPerMinute" label="转/分" />
						<el-table-column align="center" prop="texture" label="材质" />
            <el-table-column align="center" prop="nuit" label="计量单位" />
            <!-- <el-table-column align="center" prop="number" label="现存量"/> -->
            <el-table-column align="center" prop="unitPrice" label="单价" />
						<el-table-column align="center" width="250" label="操作" fixed='right'>
						  <template slot-scope="scope">
								<el-button type="text" size="small" @click="look(scope.row)">查看</el-button>
						    <el-button type="text" size="small" @click="write(scope.row,scope.$index)">修改</el-button>
                <el-button type="text" size="small" @click="wanshan(scope.row)">完善信息</el-button>
						    <el-popconfirm
						      placement="top"
						      hideIcon
						      title="是否要删除此行？"
						      @onConfirm="deleteRow(scope.row)"
						    >
						      <el-button type="text" size="small" slot="reference">删除</el-button>
						    </el-popconfirm>
						  </template>
						</el-table-column>
          </el-table>
        </div>
		  </div>
    </div>
  </div>
</template>

<script>
import { getCangku, productOneClass,withIdGetPro,addProduct,deleteProduct } from "@/api/cangku";
let tempId = null
export default {
  data() {
    return {
      proname: "",
      total: 1,
      showHeader: true,
      loading: true,
      twoClassify: [],
      proDeail: [],  //商品列表
      dialogVisible: false,
      tempData: {},
      tempIndex: -1,
    };
  },
  mounted() {
    this.cangkuList();
    this.search();
  },
  methods: {
    handleChange(value) {
      console.log(value);
      this.tempData.goodsId = value[1]
    },
		search(){
      // commodityName
      withIdGetPro({brand: this.proname ? this.proname : null}).then(res => {
        console.log(res)
        this.proDeail = res.data
      })
		},
		// 获取商品
    getList(id) {
      productOneClass({id: id}).then(res => {
        console.log(res)
        this.tableData = res.data
      })
    },
    // 获取仓库
    cangkuList(){
      getCangku({}).then(res => {
        console.log(res)
        this.twoClassify = res.data
      })
    },
    // 选择仓库分类
    handleSelece(index) {
      console.log(index);
      console.log(this.ifydata[index]);
      const navindex = this.ifydata[index].id;
      this.getList(navindex);
    },
    // 点击分类菜单获取商品
    handleNodeClick(data, checked, node) {
      console.log(data)
      if(data.listwarehouseGoods){
        withIdGetPro({pid: data.id}).then(res => {
          console.log(res)
          this.proDeail = res.data
        })
				tempId = {
					type: 'pid',
					id: data.id
				}
      }else{
        withIdGetPro({gid: data.id}).then(res => {
          console.log(res)
          this.proDeail = res.data
        })
				tempId = {
					type: 'gid',
					id: data.id
				}
      }
    },
    // open(index,path){
    //   // console.log(index, path)
    //   console.log(index);
    //   console.log(this.ifydata[index]);
    //   const navindex = this.ifydata[index].id;
    //   this.getList(navindex);
    // },
    write(item, index) {
      console.log(item);
      this.tempData = item;
      this.dialogVisible = true;
			this.$router.push({
				name: 'Addproduct',
				params: {
					options: JSON.stringify(item)
				}
			})
    },
    wanshan(item){
      console.log(item)
      this.$router.push({
        name: 'Wanshanproduct',
        params: {
          options: JSON.stringify(item)
        }
      })
    },
    // save(item) {
    //   addProduct(this.tempData).then(res => {
    //     console.log(res)
    //     this.$message({
    //       message: res.message,
    //       type: 'success'
    //     })
        
    //   })
    // },
    deleteRow(item) {
			console.log(item)
      console.log("删除");
			deleteProduct(item.id).then(res => {
				console.log(res)
				this.$message({
				  message: res.message,
				  type: 'success'
				})
				if(tempId.type == 'pid'){
					withIdGetPro({pid: tempId.id}).then(res => {
					  console.log(res)
					  this.proDeail = res.data
					})
				}else{
					withIdGetPro({gid: tempId.id}).then(res => {
					  console.log(res)
					  this.proDeail = res.data
					})
				}
			})
    },
		look(item){
			console.log(item)
			this.$router.push({
				name: 'Addproduct',
				params:{
					options: JSON.stringify(item),
					look: true
				}
			})
		},
    goPrev(page) {
      console.log(page);
    },
    goNext(page) {
      console.log(page);
    },
    resetList() {
      this.proname = ""
    },
    addPeople(item) {
			this.$router.push({
				name: 'Addproduct'
			})
    }
  }
};
</script>

<style lang="scss" scoped>
/deep/.el-button--primary {
  color: #fff;
  background-color: #18a05e !important;
  border-color: #18a05e !important;
}
/deep/.el-button--primary:hover,
.el-button--primary:focus {
  background: #18a05e !important;
  border-color: #18a05e !important;
  color: #fff !important;
}
/deep/.el-button:hover,
.el-button:focus {
  color: #18a05e;
  background-color: transparent;
}
/deep/.el-button--primary {
  color: #fff;
  background-color: #18a05e;
  border-color: #18a05e;
}
/deep/.el-button--text {
  color: #00c666 !important;
  padding: 0 5px;
}
.app-container {
  padding: 10px;
}
.inps {
  width: 100%;
  height: 32px;
  line-height: 32px;
  padding-left: 10px;
  background: none;
  border: none;
  color: #333;
}
.inps-active {
  width: 100%;
  height: 32px;
  line-height: 32px;
  padding-left: 10px;
  // background:#ccc;
  border: none;
  color: #333;
}
.zd3-title {
	height: 80px;
	display: flex;
	align-items: center;
	padding: 0 20px;
	position: relative;
	background: #ffffff;
	border-radius: 8px;
	border: 1px solid rgba(0, 0, 0, 0.1);

	> p {
		font-size: 14px;
		color: #333;
		margin-right: 30px;

		> span {
			padding-right: 20px;
		}

		> input {
			width: 200px;
			height: 32px;
			// background: #ccc;
			border-radius: 3px;
			border: 1px solid #ccc;
			padding-left: 10px;
			color: #333;
		}
	}

	> h3 {
		width: 64px;
		height: 32px;
		background: #18a05e;
		border-radius: 3px;
		margin: 0 30px 0 0;
		color: #fff;
		font-size: 14px;
		line-height: 32px;
		font-weight: 100;
		text-align: center;
		cursor: pointer;
	}

	> h4 {
		width: 64px;
		height: 32px;
		border-radius: 3px;
		border: 1px solid rgba(0, 0, 0, 0.1);
		color: #333;
		font-size: 14px;
		line-height: 32px;
		font-weight: 100;
		text-align: center;
		cursor: pointer;
		margin-right: 30px;
	}
}
.files {
  display: flex;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 8px;
  margin-top: 20px;
  overflow: hidden;
  padding: 20px;
}
.files-btm .btn-prev:after {
  content: "上一页";
}
.files-btm .btn-next:before {
  content: "下一页";
}
.files-btm .btn-prev,
.files-btm .btn-next {
  width: 65px;
}
.el-button+.el-button{
	margin-left: 0px !important;
}
.avatar {
  width: 30px;
  height: 30px;
}
.files-left {
  width: 160px;
  margin-right: 20px;
  /deep/.el-menu {
    border-right: none;
  }
  /deep/.el-submenu__title{
    height: 35px;
    line-height: 35px;
    margin-bottom: 8px;
  }
  /deep/.el-menu-item {
    height: 35px;
    line-height: 35px;
    margin-bottom: 8px;
  }
  /deep/.el-submenu .el-menu-item{
    min-width: auto !important;
  }
  /deep/.el-menu-item.is-active {
    color: #fff;
    border-radius: 5px;
    background: rgba(24, 160, 94, 0.8);
  }
}
.files-right {
  flex: 1;
  overflow: hidden;
}
.files-btm {
  background: rgba(255, 255, 255, 1);
  border-radius: 8px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  // margin-top: 20px;
  overflow: hidden;
  &-title {
    display: flex;
    align-items: center;
    height: 45px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    background: #ffffff;
    > p {
      text-align: center;
      font-size: 14px;
      color: #333;
    }
  }
  .el-pagination {
		white-space: nowrap;
		padding: 15px 5px;
		color: #303133;
		font-weight: bold;
	}
  .addDate {
    margin: 20px 32px 10px 32px;
    height: 32px;
    border-radius: 3px;
    text-align: center;
    line-height: 32px;
    font-size: 14px;
    color: #333;
    cursor: pointer;
    border: 1px dashed rgba(0, 0, 0, 0.3);
  }
  .el-button--text {
    margin: 0 15px;
  }
}
.product{
  display: flex;
  background: #ffffff;
  margin-top: 20px;
  overflow: hidden;
  border-radius: 8px;
  padding: 10px;
  .pro-l{
    width: 200px;
  }
  .pro-r{
    flex: 1;
    overflow: hidden;
    /deep/.el-table--enable-row-hover .el-table__body tr:hover>td {
      background-color: rgba(24,160,94,.2);
    }
    /deep/.el-table tr{
      cursor: pointer;
    }
    /deep/.el-table__body tr.current-row>td {
      background-color: rgba(24,160,94,.4);
    }
  }
}
.change {
  display: flex;
  flex-wrap: wrap;
  > p {
    width: 50%;
    font-size: 14px;
    display: flex;
    align-items: center;
    color: #333;
    /deep/.el-input__inner {
      width: inherit;
      background: none;
      height: 32px;
      // line-height: 32px;
      color: #333;
      border: 1px solid rgba(0, 0, 0, 0.1);
      padding: 0 25px;
    }
    /deep/.el-input__icon {
      line-height: 32px;
    }
    .userselect {
      // max-width: 250px;
      flex: 1;
    }

    > span {
      display: block;
      width: 120px;
      text-align: right;
      padding-right: 15px;
    }
    > input {
      width: inherit;
      flex: 1;
      height: 32px;
      border-radius: 3px;
      border: 1px solid rgba(0, 0, 0, 0.1);
      padding-left: 10px;
      color: #333;
    }
  }
}
</style>
